var tagList = [{
		text: '精选推荐',
		key: 0,
	},
	{
		text: '夏日防晒',
		key: 1,
	},
	{
		text: '二胎大作战',
		key: 2,
	},
	{
		text: '人气榜',
		key: 3,
	},
	{
		text: '好评榜',
		key: 4,
	},
	{
		text: 'RTX 30',
		key: 5,
	},
	{
		text: '手机也疯狂',
		key: 6,
	},
];

var swiperGoods = null,
	swiperTag = null,
	tagIndex = 0;

$(() => {
	let city = window.localStorage.getItem('city');
	if (city) {
		let cityItem = toObject(city);
		$("#location").html(cityItem.name);
	}
	initBanner();
	initTagList();
})

initBanner = () => {
	let bannerList = genSwiperImageList();
	$("#banner_box").html('');

	if (bannerList && bannerList.length > 0) {
		let itemHtml = bannerList.map((item, i) => {
			return `<div class="swiper-slide">
							<img src="${item.img}" class="home_banner_img"/>
						</div>`;
		});

		$("#banner_box").html(itemHtml);

		let swiperBanner = new Swiper('.swiper_banner', {
			initialSlide: 0,
			pagination: '.pagination_banner',
			slidesPerView: 'auto',
			paginationClickable: true,
			spaceBetween: 30,
			noSwiping: false,
			centeredSlides: true,
			loop: true,
			autoplay: 2500,
			autoplayDisableOnInteraction: false
		});

	}
}

initTagList = () => {
	$("#tag_list").html('');
	$("#goods_list").html('');
	let itemTagHtml = ``,
		swiperGoodsHtml = ``;
	tagList.forEach((e, i) => {
		//itemTagHtml += `<li><a href="javascript:void(0)">${e.text}</a></li>`;
		let actived = '';
		if (tagIndex == i) {
			actived = 'selected';
		}
		itemTagHtml += `<div class="swiper-slide ${actived}">${e.text}</div>`;
		swiperGoodsHtml += `<div class="swiper-slide">
							${loadGoodsBykey(e.key)}
						</div>`;
	})
	$("#tag_list").html(itemTagHtml);
	$("#goods_list").html(swiperGoodsHtml);
	initTagListener();
}

setSwiperTagSlide = (ele, index) => {
	$(".swiper_tag .swiper-slide").removeClass("selected");
	ele.addClass("selected");
}

loadGoodsBykey = (index) => {
	let mlist = getAllGoods();
	let goodsHtml = `<div class="goods_container">`;
	if (mlist && mlist.length > 0) {
		for (var i = 0; i < mlist.length; i++) {
			let item = mlist[i];

			let spuTagList = item.spuTagList;
			let spuTagHtml = ``;
			if (spuTagList && spuTagList.length > 0) {
				spuTagList.forEach(e => {
					spuTagHtml += `<label class="label">${e.title}</label>`
				})
			}

			goodsHtml += `<div class="goods_item" onclick="onGetGoodsItem('${item.storeId}')">
							<img src="${item.primaryImage}" class="goods_item_img"/>
							<div class="goods_content">
								<div class="title">${item.title}</div>
								<div class="goods_tag">${spuTagHtml}</div>
								<div class="goods_item_option">
									<div class="spec_for_price">
										<span class="symbol">¥</span>${getPrice(item.minSalePrice)}
									</div>
									<div class="goods-card__origin-price">
										<span class="symbol">¥</span>${getPrice(item.maxLinePrice)}
									</div>
									<img src="img/ic_add_card.png" class="goods_img_car" onclick="onAddCard('${item.storeId}')"/>
								</div>
							</div>
						</div>`;
		}
	}
	goodsHtml += `</div>`;
	return goodsHtml;
}

getPrice = (price) => {
	if (price) {
		let newPrice = parseFloat(price) / 100;
		return newPrice
	}
	return '0'
}

onGetGoodsItem = (id) => {
	setKeepAliveIndex(0);
	navigateTo(`page/goods/detail.html`)
}

onAddCard = (id) => {
	event.stopImmediatePropagation(); //阻止事件分发
	let subLoading = layer.open({
		type: 2,
		shadeClose: false,
		content: '正在操作...'
	});
	setTimeout(() => {
		layer.close(subLoading);
		showToast('加入购物车成功！');
		loadGoodsBykey(tagIndex);
	}, 1000)
}

initTagListener = () => {
	swiperGoods = new Swiper('.swiper_goods', {
		initialSlide: tagIndex,
		direction: 'horizontal', //Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。  ${loadGoodsBykey(e.key)}
		loop: false,
		nested: true,
		noSwiping: true,
		autoHeight: false, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
	});
	swiperTag = new Swiper('.swiper_tag', {
		initialSlide: tagIndex,
		slidesPerView: 4,
		paginationClickable: false,
		spaceBetween: 10, //slide之间的距离（单位px）。
		freeMode: true, //默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
		loop: false, //是否可循环
		noSwiping: false,
		centeredSlides: false,
		onTab: function(swiper) {
			let n = swiper.clickedIndex;
			console.log('n=' + n)
		}
	});
	swiperTag.slides.each(function(index, val) {
		var ele = $(this);
		ele.on("click", function() {
			setSwiperTagSlide(ele, index);
			swiperGoods.slideTo(index, 500, false);
		});
	});
}
